<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Login Page | Amaze UI Example</title>
<!DOCTYPE html>
<html>
<head lang="en">

  <meta charset="UTF-8">
  <title>Login Page | Amaze UI Example</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Amaze UI Examples</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
    <style>

        [v-cloak]{
            display: none;
        }
        .red{
            background-color:red;
        }
        .blue{
            background-color: #04ff09;
        }
    </style>
</head>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
    <script src="js/jquery.min.js"></script>
<body>

<div class="am-g" id="app">
  <div class="col-lg-6 col-md-8 col-sm-centered">
      <!--<div><<<<<<< Updated upstream</div>-->
      <br/>
      <div>
          <div class="am-g">
              <h1>三泵订货</h1>
              <!--<p>SanShuiOrderSystem<br/>全网最好的B2B线上订货系统</p>-->
          </div>
          <hr />
      </div>
    <h3>登录</h3>
    <hr>
    <div class="am-btn-group">

    </div>
    <br>
    <br>

    <form method="post" class="am-form">
      <label for="name">账号:</label>
      <input type="text" v-model="name" id="name">
      <br>
      <label for="password">密码:</label>
      <input type="password" v-model="password" id="password">
      <br>
      <label for="remember-me">
        <input id="remember-me" type="checkbox">
        记住密码
      </label>
      <br />
      <div class="am-cf">
        <input type="button" id="denglu" @click="login" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl">
<!--        <input type="button" name="" value="注册 " class="am-btn am-btn-default am-btn-sm am-fr">-->
      </div>
    </form>
    <hr>
    <!-- <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p> -->
  </div>
    <div id="tip" :class="[tankuancolor? 'blue':'red']" onclick="xiaosi()" style="width:200px;height:45px;display: none;
          position: absolute;right: 0px;border-radius: 10px 0px 0px 10px;cursor:pointer"  v-cloak>
      <!--  onmouseover="hiddentip();"-->
        <h1>&nbsp;&nbsp;{{msg}}</h1>
</div>
</div>

<script>
  var vm=new Vue({
    el:"#app",
    data:{
        name:"",
        password:"",
        //提示框颜色开关
        tankuancolor:false,
        //提示信息
        msg:'服务器出错！',
    },
    methods:{
      //登录
      login(){
        axios.post("/login/selectuser",{"name":this.name,"password":this.password}).then(res=>{
            if(res.data.success){
              // alert("登录成功！欢迎用户"+res.data.obj.username);
              vm.msg='登录成功！';
              vm.tankuancolor=true;
              //将值存入cooke只
              var key=res.data.obj.key;
              var username=res.data.obj.username;
              var value=key+"|"+username;

              setCookie("token",value,0.5);
              function setCookie(cname, value, exdays) {   //设置cookie的键，值，存在的天数
                var d = new Date();
                d.setTime(d.getTime() + (exdays*24*60*60*1000));
                var expires = "expires="+ d.toUTCString();   //转换成国际时间
                document.cookie = cname + "=" + value + ";" + expires + ";path=/";
              }

              setTimeout(function () {
                var token=document.cookie.split(';')[0]
                var quan=token.split("|");
                switch (quan[3]) {
                  case "0":location.href="后台主页.html"
                    break
                  case "1":location.href="html/wares/商品列表.html"
                    break
                  case "2":location.href="html/order/订货单.html"
                    break
                  case "3":location.href="html/customer/客户列表.html"
                    break
                  case "4":location.href="html/warehouse/商品出库.html"
                    break
                  case "5":location.href="html/purchase/采购订单.html"
                    break
                  case "6":location.href="html/finance/资金账户.html"
                    break
                }
                // window.location.href='后台主页.html'
              },800)
            }else{
              if(res.data.code==1){
                // alert("");
                vm.msg="账户不存在！";
                vm.tankuancolor=false;

              }
              if(res.data.code==2){
                // alert("密码错误！")
                vm.msg="密码错误！";
                vm.tankuancolor=false;
              }
            }
        })
      },


    },
    mounted() {

    }
  });

  $("#denglu").click(function () {
      $("#tip").show();
  });

  function xiaosi() {
    $("#tip").hide();
  }

</script>
<script type="text/javascript">





//     //定义“获得指定dom节点”的函数，因为其重用率高
//     function $(d){return document.getElementById(d);}
//     //控制div逐渐显示
//     var i = 0;
//     function change_show(){
//         var obj = $("tip");
//         i=i+5; //逐渐显示速度
//         obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小
//         obj.style.opacity = i/100; //兼容FireFox
//         if(i>=100){
//             clearInterval(s);
//             i=0;
//         }
//     }
//     //控制div逐渐消失
//     var j = 100;
//     function change_hidden(){
//         var obj = $("tip");
//         j=j-5; //逐渐消失速度
//         obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大
//         obj.style.opacity = j/100; //兼容FireFox
//         if(j<=0){
//             clearInterval(h);
// //obj.style.display="none";
//             j=100;
//         }
//     }
//     //控制change_show()行为
//     var s;
//     function show(){
//         if(s){clearInterval(s);}
//         $("tip").style.display="block";
//         s = setInterval(change_show,1);
//     }
//     //控制change_hidden()行为
//     var h;
//     function hiddentip(){
//         $("tip").innerHTML="";
//         h = setInterval(change_hidden,1);
//     }
    //-->
</script>
</body>
</html>
